<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
        <style type="text/css">
        	*{
	margin: 0;
	padding: 0;
}
#wrap{
	width: 400px;
	height: 600px;
	border: 1px solid black;
	margin: 0 auto;
	position: relative;
}
#none{
	width: 400px;
	height: 600px;
	background-color: aqua;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	/*line-height: 600px;*/

}
#none input:first-child{
	margin-top: 200px;
}
#time{
	font-size: 30px;
	float: left;
}
#count{
	font-size: 30px;
	float: right;
}
#question{
	/*清除浮动*/
	clear: both;
	font-size: 200px;
	text-align: center;
	margin-top: 100px;
}
#answer{
	list-style-type: none;
	/*使用弹性盒模型*/
	display: flex;
	justify-content: space-around;
	margin-top: 140px;
}
#answer li{
	font-size: 50px;
}
#scroe{
			width: 30px;
			height: 20px;
			position: absolute;
			left: 175px;
			bottom: 30px;
			background-color: pink;
			z-index:5;
		}

        </style>
	</head>
	<body>
		<div id="wrap">
			<div id="none">
				昵称:<input type="text" name="user" id="user" value="" /><br />
					手机号:<input type="text" name="tel" id="tel" value="" /><br />
					<input id="all" type="submit" value="登录"/>
			</div>
			<div id="time">剩余时间:30</div>
			<div id="count">数量:0</div>
			<div id="question">字</div>
			<ul id="answer">
				<li>红</li>
				<li>黄</li>
				<li>绿</li>
				<li>蓝</li>
				<li>紫</li>
			</ul>
            <div id="scroe"><a href="aa.html">排行榜</a></div>
		</div>
        
	</body>
	<script src="game.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//创建数组,存储文字
var all = document.getElementById("all");
var none = document.getElementById("none");
var user = document.getElementById("user");
var tel = document.getElementById("tel");
all.onclick = function(){
	
	if (user.value==''|| tel.value=='') {
		alert('手机号和昵称不能为空');
		return;
	}else{
		none.style.display = "none";
	    time = 30;
	    localStorage.user = user.value;
	    localStorage.tel = tel.value;
	}
	
}
var texts = ['红','黄','蓝','紫','绿'];
var colors = ['red','yellow','blue','purple','green'];
//随机函数
function ranNum(m,n){
	return Math.floor(Math.random()*(n - m +1)+m)
}
//显示问题的函数
var divQuestion = document.getElementById("question");
//随机函数
var answerResult = 0;//记录答案
function randomQuestion(){
	//随机文字
	divQuestion.innerHTML = texts[ranNum(0,texts.length - 1)];
	//随机颜色
	var textColor = colors[ranNum(0,colors.length - 1)];
	divQuestion.style.color = textColor;
	if (textColor == "red") {
		answerResult = "红";
	}else if(textColor == "yellow"){
		answerResult = "黄";
	}else if(textColor == "blue"){
		answerResult = "蓝";
	}else if(textColor == "purple"){
		answerResult = "紫";
	}else if(textColor == "green"){
		answerResult = "绿";
	}
}
randomQuestion();
//洗牌算法---随机数组中的元素 --不重复
function randomArr(arr){
	//遍历数组
	for (var i = 0;i < arr.length;i++) {
		//随机一个下标
		var ran = ranNum(0,arr.length - 1);
		//如果随机下标和i(当前下标)不相等,则交换下标对应元素的位置
		if (ran != i) {
			var temp = 0;
			temp = arr[i];
			arr[i] = arr[ran];
			arr[ran] = temp;
		}
	}
}
//获取答案所在的ul 
var answerUl = document.getElementById("answer");
//获取存储答案的li
var lis = answerUl.getElementsByTagName("li");
//随机答案
function randomAnswer(){
	//随机一个颜色文字顺序
	randomArr(texts);
	//随机一个颜色顺序
	randomArr(colors);
	//为li赋值
	for (var i = 0;i < lis.length;i++) {
		//赋值文字
		lis[i].innerHTML = texts[i];
		//赋值颜色
		lis[i].style.color = colors[i];
		
	}
}
//调用随机答案
randomAnswer()
//获取剩余时间对象
var timeDiv = document.getElementById("time");
var time = 30;//存储剩余时间
function restTime(){
	time--;
	//重新赋值
	timeDiv.innerHTML = "剩余时间:" + time;
	if (time == 0) {
//		alert("GG")
		//关闭定时器
         none.style.display = "block";
         none.innerHTML = "<a href='aa.html'>排行榜</a>";
		clearInterval(timer)
		for (var i = 0;i < lis.length;i++) {
	          lis[i].onclick = null;
	    }
	}
}
var timer = setInterval("restTime()",1000)
//获取显示属性对象的div对象
var divCount = document.getElementById("count");
var count = 0;//存储答对题的数量
//为所有的li对象添加点击时间
for (var i = 0;i < lis.length;i++) {
	lis[i].onclick = function(){
		//如果回答正确,则加 1 分
		if (answerResult == this.innerHTML) {
			count++;
//				//显示最好成绩 本地存储 使用key为 bestScores
// 	            if (localStorage.count) {
// 	               //获取本地存储最高成绩与当前得分比较,获得最高值
//               	localStorage.count = localStorage.count > count ? localStorage.count : count;
// 	                
// 	                } else{
// 		               //第一次玩游戏,最高分就是当前分数
// 		                  //存储到本地
// 		                localStorage.count = count;
// 		
// 	               }
   	         localStorage.count = count;
			divCount.innerHTML = "数量:" + count;
			//随机问题
			randomQuestion();
			//随机答案
			randomAnswer()
		}
	}
}
//使用JQ给登录按钮添加点击事件
		$("#all").click(function(){
			//JQ封装的Ajax网络请求
			$.ajax({
				type:"get",//请求方式
				url:"game.php",//请求地址
				async:true,//是否异步
				dataType:"json",//后台返回的数据类型
				data:{//发送请求时传入的参数
					user:localStorage.user,
					tel:localStorage.tel,
					count:localStorage.count
					
				}
				
			});
			
			
		})


	</script>

</html>
